



<%--
  Created by IntelliJ IDEA.
  User: WangChunNi
  Date: 2022/10/11
  Time: 13:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<html>
<head>
    <title>登录</title>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>

    <!-- 引用登录CSS样式 -->
    <link rel="stylesheet" href="login.css">
    <!-- 引入网页图标 -->
    <link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">

</head>
<body>
<div class="box">
    <h2>花妍巧语</h2>
    <div class="input-box">
        <label>账号</label>
        <input id="username" type="text" placeholder="字母、数字 长度2~12位" />

    </div>
    <div class="input-box">
        <label>密码</label>
        <input id="password" type="password" placeholder="字母、数字 长度2~12位" />
    </div>
    <div class="input-box">
        <label>验证码</label>
        <input id="captcha" type="text" />
    </div>
    <div class="btn-box">
        <a href="#">忘记密码?</a>
        <div>
            <button>登录</button>
            <button><a href="#">注册</a></button>
        </div>
    </div>
</div>




<!-- JS输入验证
<script>

    // 获取dom
    let username = document.querySelector("#username");
    let password = document.querySelector("#password");

    // 添加标识
    let user_name_flag = false;
    let password_flag = false;



    //验证用户名输入是否符合要求
    function checkUsername() {
        // 获取用户输入的用户名
        let fetch_username = username.value;
        // 用户名的正则表达式 中文、字母、数字、下划线 长度2~12位
        const userNameReg = /^[\u4E00-\u9FA5a-zA-Z0-9_]{2,12}$/;
        //判断
        if (userNameReg.test(fetch_username)) {
            // 正确
            tips[0].style.color = "#ccc";
            user_name_flag = true;
        } else {
            // 错误
            tips[0].style.color = "red";
            user_name_flag = false;
        }
    }

    // 失焦事件监听
    username.addEventListener("blur", checkUsername);

    /***********************************************************************************/


    //验证密码输入是否符合要求
    function checkPassword() {
        //获取输入的密码
        let fetch_password = password.value;
        //密码的正则表达式:字母、数字、下划线长度6~12位
        const passwordReg = /^[a-zA-Z0-9_]{6,12}$/;
        //判断密码输入是否符合条件
        if (passwordReg.test(fetch_password)) {
            tips[1].style.color = "#ccc";
            password_flag = true;
        } else {
            tips[1].style.color = "red"
            password_flag = false;
        }
    }

    // 失焦事件监听
    password.addEventListener("blur", checkPassword)



    regBtn.addEventListener("click", function () {
        if (user_name_flag && password_flag) {
            console.log("可以注册");
        } else {
            console.log("验证不通过");
        }
    })


</script> -->


</body>

</html>